<template>
  <div class="accountDetail">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>账户详情</span>
        <div class="infoBg">
          <el-tag v-if="totalAccount.accountStatus === 3">审核中</el-tag>
          <el-tag v-else-if="totalAccount.accountStatus === 4" type="success">审核通过</el-tag>
          <el-tag v-else type="danger">审核拒绝</el-tag>
          <div v-if="totalAccount.rejectReason" class="rejectInfo">拒绝原因：{{ totalAccount.rejectReason }}</div>
        </div>
        <div class="hd-abs">
          <el-button class="filter-item" type="danger" @click="handleFlow">流水</el-button>
          <el-button class="filter-item" type="primary" @click="dialogVisibleICBC  = true">充值</el-button>
					<el-button class="filter-item" type="success" @click="dialogFormVisible  = true">提现</el-button>
					<el-button class="filter-item" type="warning" @click="dialogVisibleinfo  = true">编辑</el-button>
        </div>
      </div>
      <account-info @showWithdrawal="watchShowWithdrawal" :totalAccount="totalAccount" :dialogVisibleICBC.sync="dialogVisibleICBC" :dialogFormVisible.sync="dialogFormVisible" :dialogVisibleinfo.sync="dialogVisibleinfo">
        <div slot="btns">
          <!-- <el-button type="primary" >充值</el-button> -->
          <!-- <el-button type="primary" plain @click="handleCash" >提现</el-button> -->
        </div>
      </account-info>
    </el-card>
    <el-dialog title="编辑信息" :visible.sync="dialogVisibleinfo" v-if="dialogVisibleinfo" width="1300px" :close-on-click-modal="false">
      <ICBCInfo :ICBCtype="ICBCtype" @confirminfo="confirminfo"></ICBCInfo>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinfo = false">取消</el-button>
        <el-button type="primary" @click="confirminfo()">确定</el-button>
      </div> -->
    </el-dialog>
    <el-dialog title="充值" :visible.sync="dialogVisibleICBC" width="800px">
      <account-info :totalAccount="totalAccount"></account-info>
      <el-form :model="temp" ref="temp" :rules="rules" label-width="90px">
        <el-form-item label="充值金额" prop="amount">
          <NumInput :min="0" :float="2" :max="totalAccount.avibal" placeholder="请输入充值金额" v-model="temp.amount" />
          <!-- <p style="color:#ff8704;">*将电子账户的资金提现至名实体账户中</p> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleICBC = false">取消</el-button>
        <el-button type="primary" @click="ConfirmRecharge('UserInfo')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="申请提现" :visible.sync="dialogFormVisible" width="800px">
      <account-info @showWithdrawal="watchShowWithdrawal" :totalAccount="totalAccount"></account-info>

      <el-form style="margin-top: 15px;" :model="temp" ref="form" :rules="rules" label-width="90px">
        <el-form-item label="提现金额" prop="amount">
          <NumInput :min="0" :float="2" :max="totalAccount.avibal" placeholder="请输入提现金额" v-model="temp.amount">
            <template v-slot:append>
              <span>元</span>
            </template>
          </NumInput>
        </el-form-item>
        <p style="margin-left: 80px; font-size: 13px; color: rgb(155, 155, 155); padding-left: 10px;">
          <span style="color: red;">*</span>
          将电子账户的资金提现至实体账户中。一天只能提现一次，最高不超过20万，T+1到账。
        </p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCash()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-loading="listLoading" title="提现记录" :visible.sync="showWithdrawalDialog" append-to-body width="800px">
      <el-table :data="withdrawalList" border fit highlight-current-row row-key="id" style="width: 100%;">
        <el-table-column label="提现金额" prop="amount" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <div v-if="row.status == 0">失败</div>
            <div v-else-if="row.status == 1">成功</div>
            <div v-else>提现中</div>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" prop="submitTime" align="center" />
      </el-table>

      <pagination v-show="withdrawalTotal>0" :total="withdrawalTotal" :page.sync="withdrawalListQuery.pageNo" :limit.sync="withdrawalListQuery.pageSize"
      @pagination="watchShowWithdrawal" />
    </el-dialog>
  </div>
</template>

<script>
  import ICBCInfo from './ICBCInfo.vue'
  import {
    ICBCwithdraw,
    platUpdate
  } from '@/api/account'
  import AccountInfo from './AccountInfo'
  import NumInput from '@/components/NumInput'
  import {
    BASEURL
  } from "../../../../public/static/config";
  import AddressCascader from '@/components/AddressCascader'
  import { getWithdrawalRecord } from '@/api/user'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'AccountDetail',
    components: {
      AccountInfo,
      NumInput,
      AddressCascader,
      ICBCInfo,
      Pagination
    },
    props: {
      totalAccount: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        ICBCtype: 0,
        dialogFormVisible: false,
        dialogVisibleICBC: false,
        dialogVisibleinfo: false,
        temp: {
          amount: ''
        },
        rules: {
          amount: [{
            required: true,
            message: "请输入",
            trigger: "blur"
          }],
        },
        withdrawalList: [],
        withdrawalTotal: 0,
        listLoading: true,
        withdrawalListQuery: {
          pageNo: 1,
          pageSize: 10,
        },
        showWithdrawalDialog: false,
      }
    },
    created() {
      // this.getList();
    },
    methods: {
      // 充值
      ConfirmRecharge() {
        this.$refs["temp"].validate((valid) => {
          if (valid) {
            if (!this.temp.amount || Number(this.temp.amount) <= 0) {
              this.$message.error('充值金额必须大于0')
              return
            }
            this.dialogVisibleICBC = false;
            // 跳转 银行充值H5
            window.open(
              `http://app.heikemen.cn/gotc/ICBCh5/index.html?token=${this.$store.getters.token}&amount=${this.temp.amount}&url=${BASEURL}`,
              '_blank');
            this.temp.amount = '';
            this.getAccount();
          }
        });
      },
      getAccount() {
        this.$emit('getAccount')
      },
      handleCash() {
        this.temp.amount = "";
        this.dialogFormVisible = true;
      },
      confirminfo(UserInfo) {
        this.$delete(UserInfo, "createTime");
        this.$delete(UserInfo, "updateTime");
        
        this.$confirm('更改信息需要审核，是否确定要更改').then(() => {
          platUpdate(UserInfo).then((res) => {
            this.getAccount();
            this.dialogVisibleinfo = false;
            // this.$notify({
            //   title: "成功",
            //   message: '操作成功',
            //   type: "success",
            //   duration: 2000,
            // });

            this.$message({
              message: '操作成功',
              type: 'success'
            });
          });
        })
      },
      confirmCash() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (!this.temp.amount || Number(this.temp.amount) <= 0) {
              this.$message.error('提现金额必须大于0')
              return
            }
            ICBCwithdraw(this.temp).then((res) => {
              console.log(res);
              // this.getList();
              this.getAccount();
              this.dialogFormVisible = false;
              this.temp.amount = '';
              // this.$notify({
              //   title: "成功",
              //   message: res.message,
              //   type: "success",
              //   duration: 2000,
              // });

              this.$message({
                message: "操作成功",
                type: 'success'
              });
            });
          }
        });
      },
      handleFlow() {
        this.$router.push({
          path: "/flow",
        });
      },
      watchShowWithdrawal() {
        this.listLoading = true
        getWithdrawalRecord(this.withdrawalListQuery).then(res => {
          this.showWithdrawalDialog = true
          this.withdrawalList = res.list || []
          this.withdrawalTotal = res.totalCount
					this.listLoading = false
				})
				.catch((err) => {
					console.log(err)
          this.listLoading = false
				})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .accountDetail {
    .searchItem {
      display: flex;
      align-items: center;

      .searchLabel {
        color: #666;
      }
    }

    .clearfix {
      position: relative;
    }

    .infoBg {
      position: absolute;
      left: 80px;
      top: 0px;
    }

    .hd-abs {
      position: absolute;
      right: 30px;
      top: -5px;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
    }

    .hd-abs span {
      display: block;
      margin: 0 10px;
      font-size: 14px;
      color: #4a9ff9;
    }
  }

  .rejectInfo {
    display:inline-block;
    margin-left: 10px;
  }
</style>
